﻿@page "/components/slider"

<DocsPage>
    <DocsPageHeader Title="Slider" SubTitle="A slider is a visual representation and action to let the user select from a range of values." />
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader>
                <Title>Basic Sliders</Title>
                <Description>Lets you select a value along the whole range.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <SliderBasicExample />
            </SectionContent>
            <SectionSource Code="SliderBasicExample" GitHubFolderName="Slider"  />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Step Sliders</Title>
                <Description>You can choose the increment with the steps prop.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <SliderStepsExample />
            </SectionContent>
            <SectionSource Code="SliderStepsExample" GitHubFolderName="Slider"  />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Minimum and Maximum Values</Title>
                <Description>With the <CodeInline>Min</CodeInline> and <CodeInline>Max</CodeInline> property you can set the minimum and maximum allowed value.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <SliderMinMaxExample />
            </SectionContent>
            <SectionSource Code="SliderMinMaxExample" GitHubFolderName="Slider"  />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
